<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>注册 - 610书窝</title>

  <!-- Favicon -->
  <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">

  <!-- Custom CSS (for variables mainly) -->
  <link rel="stylesheet" href="./assets/css/style.css">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Work+Sans:wght@400;500;700&display=swap"
    rel="stylesheet">

  <style>
    :root {
      /* Define background image path here */
      --bg-image-url: url('./assets/images/login-bg.jpg');
      /* <-- 替换为您想用的背景图片路径 (与登录页保持一致或不同) */
    }

    body {
      font-family: var(--ff-work-sans);
      background-image: var(--bg-image-url);
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      /* 背景固定 */
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      color: var(--dark-pink-text);
      padding: 20px;
    }

    .auth-container {
      max-width: 400px;
      width: 100%;
      padding: 40px 30px;
      background-color: hsla(0, 0%, 100%, 0.7);
      /* 半透明白色背景 */
      backdrop-filter: blur(15px) saturate(180%);
      /* 毛玻璃效果 */
      -webkit-backdrop-filter: blur(15px) saturate(180%);
      /* 兼容 Safari */
      border-radius: var(--radius-card, 10px);
      border: 1px solid hsla(0, 0%, 100%, 0.2);
      box-shadow: 0 8px 32px 0 hsla(330, 40%, 45%, 0.15);
      text-align: center;
    }

    .auth-logo {
      margin-bottom: 25px;
    }

    .auth-logo img {
      max-width: 150px;
      /* 调整Logo大小 */
      height: auto;
    }


    .auth-title {
      font-family: var(--ff-jost);
      font-size: var(--fs-2);
      color: var(--dark-pink-text);
      margin-bottom: 30px;
    }

    .input-group {
      margin-bottom: 20px;
      text-align: left;
    }

    .input-label {
      display: block;
      font-size: var(--fs-7);
      color: var(--dark-pink-text);
      margin-bottom: 8px;
      font-weight: var(--fw-500);
    }

    .input-field {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid var(--primary-pink);
      border-radius: var(--radius-pill, 30px);
      background-color: hsla(0, 0%, 100%, 0.8);
      /* 输入框轻微透明 */
      font-size: var(--fs-6);
      color: var(--dark-pink-text);
      transition: var(--transition-1);
    }

    .input-field::placeholder {
      color: var(--medium-gray);
    }

    .input-field:focus {
      outline: none;
      border-color: var(--secondary-pink);
      box-shadow: 0 0 0 3px hsla(335, 85%, 75%, 0.2);
      background-color: var(--white-1);
    }

    .btn-submit {
      width: 100%;
      padding: 14px;
      background-color: var(--secondary-pink);
      color: var(--white-1);
      border: none;
      border-radius: var(--radius-pill, 30px);
      font-size: var(--fs-5);
      font-weight: var(--fw-600);
      cursor: pointer;
      transition: var(--transition-1);
      margin-top: 10px;
    }

    .btn-submit:hover {
      background-color: var(--primary-pink);
      color: var(--dark-pink-text);
    }

    .switch-link {
      margin-top: 25px;
      font-size: var(--fs-7);
      color: var(--dark-pink-text);
    }

    .switch-link a {
      color: var(--secondary-pink);
      font-weight: var(--fw-500);
      text-decoration: none;
      transition: var(--transition-1);
      display: inline;
      /* 让链接和文字在一行 */
    }

    .switch-link a:hover {
      text-decoration: underline;
      color: var(--primary-pink);
    }

    .home-link {
      position: absolute;
      top: 20px;
      left: 20px;
      color: var(--white-1);
      background-color: hsla(335, 85%, 75%, 0.7);
      padding: 8px 12px;
      border-radius: var(--radius-pill);
      text-decoration: none;
      font-size: var(--fs-7);
      backdrop-filter: blur(5px);
      transition: var(--transition-1);
    }

    .home-link:hover {
      background-color: hsla(335, 85%, 65%, 0.9);
    }
  </style>
</head>

<body>
  <a href="./index.html" class="home-link"><i class="fas fa-home"></i> 返回首页</a>

  <div class="auth-container">
    <div class="auth-logo">
      <a href="./index.html"><img src="./assets/images/logo.svg" alt="610书窝 Logo"></a>
    </div>
    <h1 class="auth-title">注册新账号</h1>

    <form action="#"> <!-- action="#" 表示无实际提交 -->
      <div class="input-group">
        <label for="username" class="input-label">用户名 / 昵称</label>
        <input type="text" id="username" name="username" class="input-field" placeholder="想一个独特的昵称吧~" required>
      </div>
      <div class="input-group">
        <label for="student-id" class="input-label">学号 (可选)</label>
        <input type="text" id="student-id" name="student-id" class="input-field" placeholder="方便舍友们认出你">
      </div>
      <div class="input-group">
        <label for="password" class="input-label">设置密码</label>
        <input type="password" id="password" name="password" class="input-field" placeholder="输入密码" required>
      </div>
      <div class="input-group">
        <label for="confirm-password" class="input-label">确认密码</label>
        <input type="password" id="confirm-password" name="confirm-password" class="input-field" placeholder="再次输入密码"
          required>
      </div>
      <button type="submit" class="btn-submit">注 册</button>
    </form>

    <p class="switch-link">
      已有账号？ <a href="./login.html">直接登录</a>
    </p>
  </div>

</body>

</html>